import React from 'react';
import { Row, Table, Spin, Tabs} from 'antd';
import Axios from '../../assets/js/axios'
import Utils from '../../assets/js/utils'
// import { threadId } from 'worker_threads';
const TabPane = Tabs.TabPane;

class GasUserShow extends React.Component {
    state = {
        selectedRowKeys: [],
        selectedRows:[],
        data: [],
        visibility: false,
        alertInfo: {},
        loading: true,
        isShowMeterSearch: false,
        title: '',
        num: 0
    }

    params = {
        page: 1,
        cityInfo: {},
        meter_no: this.props.match.params.meter_no
    }

    componentWillMount() {
        this.mounted = true
        //初始化获取数据
        this.getUserList()
        if(this.mounted) {
            this.setState({
                visibility: false,
                alertInfo: {}
            })
        }
    }

    //获取数据
    getUserList = (url = '/api/meters/showUseMeter', obj = {}) => {
        Axios.requestList(this,url, 'get',this.params, obj )
    }

    handleChange = (num) => {

        if(num === '3') {
            this.getUserList('/api/meters/ShowUseMeterInstructions')
        } else if (num === '1') {
            this.getUserList()
        } else if(num === '2') {
            this.getUserList()
        }
    }

    componentWillUnmount() {
        this.mounted = false
    }

    render() {
        const columns = [
            {
                title: '上报时间',
                dataIndex: 'cmd_uptime',
                render(cmd_uptime) {
                    return Utils.formateDate(cmd_uptime)
                }
            },
            {
                title: '命令类型',
                dataIndex: 'cmd_type',
                render(cmd_type) {
                    return Utils.cmdTypeDisplay(cmd_type)
                }
            },
            {
                title: '冻结日期',
                dataIndex: 'bef_date',
                width: 180,
                render(bef_date) {
                    return Utils.formateDate(bef_date)
                }
            },
            {
                title: '冻结底数',
                dataIndex: 'bef_read'
            },
            {
                title: '当前日期',
                dataIndex: 'now_date',
                width: 180,
                render(now_date) {
                    return Utils.formateDate(now_date)
                }
            },
            {
                title: '当前底数',
                dataIndex: 'now_read',
            },
            {
                title: '阀门状态',
                dataIndex: 'valve_state',
            },
            {
                title: '电池电压',
                dataIndex: 'cell_volatge',
            },
            {
                title: '设备状态',
                dataIndex: 'err_code',
            },
            {
                title: 'ECL',
                dataIndex: 'ecl',
            },
            {
                title: 'RSRP',
                dataIndex: 'rsrp',
            },
            {
                title: 'RSSI',
                dataIndex: 'rssi',
            },
            {
                title: 'SNR',
                dataIndex: 'snr',
            },
            {
                title: 'CELLID',
                dataIndex: 'cellid',
            },
            {
                title: 'PCI',
                dataIndex: 'pci',
            },
            {
                title: 'EARFCN',
                dataIndex: 'earfcn',
            }/*,
            {
                title: '环境温度',
                dataIndex: 'env_temp',
            }*/
        ];
        const columns3 = [
            {
                title: '表具编号',
                dataIndex: 'meter_no'
            },
            {
                title: '命令类型',
                dataIndex: 'cmd_type',
                render(cmd_type) {
                    return Utils.cmdTypeDisplay(cmd_type)
                }
            },
            {
                title: '命令参数',
                dataIndex: 'cmd_parm'
            },
            {
                title: '备注',
                dataIndex: 'cmd_data'
            },
            {
                title: '响应代码',
                dataIndex: 'status'
            },
            {
                title: '提示信息',
                dataIndex: 'message'
            },
            {
                title: '返回数据',
                dataIndex: 'res_data'
            },
            {
                title: '回传命令状态',
                dataIndex: 'cmd_state'
            },
            {
                title: '回传命令内容',
                dataIndex: 'cmd_content'
            },
            {
                title: '命令执行时间',
                dataIndex: 'cmd_dotime',
                render(cmd_dotime) {
                    return Utils.formateDate(cmd_dotime)
                }
            },
            {
                title: '创建时间',
                dataIndex: 'created_at',
                render(created_at) {
                    return Utils.formateDate(created_at)
                }
            },
            {
                title: '更新时间',
                dataIndex: 'updated_at',
                render(updated_at) {
                    return Utils.formateDate(updated_at)
                }
            }
        ];
        return (
            <div>
                <Tabs defaultActiveKey="1" onChange={(num) => {this.handleChange(num)}}>
                    <TabPane tab="抄表数据" key="1">
                        <Row>
                            <Spin spinning={this.state.loading} tip="加载中。。。">
                                <Table bordered
                                       columns={columns}
                                       dataSource={this.state.data}
                                       pagination = {this.state.totalRecord < 21 ? false : this.state.pagination}
                                       locale={{emptyText: '暂无数据'}}
                                       scroll={{x: 1700}}
                                />
                            </Spin>
                        </Row>
                    </TabPane>
                    <TabPane tab="异常记录" key="2">
                        <Row>
                            <Spin spinning={this.state.loading} tip="加载中。。。">
                                <Table bordered
                                       columns={columns}
                                       dataSource={this.state.data}
                                       pagination = {this.state.totalRecord < 21 ? false : this.state.pagination}
                                       locale={{emptyText: '暂无数据'}}
                                       scroll={{x: 1700}}
                                />
                            </Spin>
                        </Row>
                    </TabPane>
                    <TabPane tab="预置命令" key="3">
                        <Row>
                            <Spin spinning={this.state.loading} tip="加载中。。。">
                                <Table bordered
                                       columns={columns3}
                                       dataSource={this.state.data}
                                       pagination = {this.state.totalRecord < 21 ? false : this.state.pagination}
                                       locale={{emptyText: '暂无数据'}}
                                       scroll={{x: 1700}}
                                />
                            </Spin>
                        </Row>
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}

export default GasUserShow;